<template>
  <div class="my">
    <div class="wrapper">
      <div class="backGroundImg"></div>
      <div class="infoCard">
        <div class="infoCard__portrait">
          <img src="@/assets/img/portrait.png" alt="" />
        </div>
        <div class="infoCard__txt">
          <p class="infoCard__txt__name">{{ user.username }}</p>
          <p class="infoCard__txt__id">ID: {{ user.id }}</p>
        </div>
        <ul class="infoCard__addInfo">
          <li class="addInfo__item">
            <span class="item__name">红包</span>
            <span class="item__num">218</span>
          </li>
          <li class="addInfo__item">
            <span class="item__name">优惠券</span>
            <span class="item__num">12张</span>
          </li>
          <li class="addInfo__item">
            <span class="item__name">鲜豆</span>
            <span class="item__num">88</span>
          </li>
          <li class="addInfo__item">
            <span class="item__name">白条</span>
            <span class="item__num">100</span>
          </li>
        </ul>
      </div>
      <div class="detailCart">
        <div class="detail__item money">
          <div class="iconfont detail__item__icon">&#xe7cc;</div>
          <div class="detail__item__txt">我的钱包</div>
          <div class="iconfont detail__item__arrow">&#xe697;</div>
        </div>
        <div class="detail__item address" @click="GoToAddress">
          <div class="iconfont detail__item__icon">&#xe6e2;</div>
          <div class="detail__item__txt">我的地址</div>
          <div class="iconfont detail__item__arrow">&#xe697;</div>
        </div>
        <div class="detail__item help">
          <div class="iconfont detail__item__icon">&#xe63f;</div>
          <div class="detail__item__txt">客服与帮助</div>
          <div class="iconfont detail__item__arrow">&#xe697;</div>
        </div>
      </div>
    </div>
    <Docker :activeIndex="3" />
  </div>
</template>

<script>
import Docker from "@/components/docker";
import { useRouter } from "vue-router";
import { get } from "../../API/axios";
import { onMounted, ref, reactive } from "vue";
export default {
  name: "my",
  components: { Docker },

  setup() {
    const router = useRouter();
    //获取用户信息
    const user = reactive({ username: "", id: "" });
    const getUserData = async () => {
      const res = await get("/api/user/userinfo");
      if (res.errno === 0) {
        user.username = res.data.username;
        user.id = res.data._id;
      }
    };
    onMounted(() => {
      getUserData();
    });

    const GoToAddress = () => {
      router.push("/addressmanage");
    };
    return { GoToAddress, user };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.my {
  z-index: -9;
  height: 100vh;
  overflow: hidden;
  background-color: $searchBgc-color;
}

.backGroundImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background-image: linear-gradient(
    235deg,
    #3a6ff3 0%,
    #3a6ff3 30%,
    #50c7fb 100%
  );
  // transform: translate3d(-25%, -60%, 0);
}

.infoCard {
  z-index: 99;
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 3.4rem;
  height: 2rem;
  background-color: $white-color;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  border-radius: 0.08rem;
  &__portrait {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 1.2rem;
      height: 1.2rem;
    }
  }
  &__txt {
    margin-top: 0.6rem;
    margin-bottom: 0.12rem;
    margin-left: auto;
    margin-right: auto;
    &__name {
      font-size: 0.24rem;
      color: $heavy-content-color;
      letter-spacing: 0.19px;
      text-align: center;
      line-height: 0.36rem;
    }
    &__id {
      line-height: 0.18rem;
      font-size: 0.14rem;
      color: #c1c0c9;
      text-align: center;
    }
  }
  &__addInfo {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-top: solid 1px $bgc-color;
    .addInfo__item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.12rem;
      .item__name {
        font-size: 0.12rem;
        color: #c1c0c9;
        text-align: center;
      }
      .item__num {
        line-height: 0.36rem;
        font-size: 0.2rem;
        color: #262628;
        text-align: center;
      }
    }
  }
}

.detailCart {
  position: absolute;
  top: 3.3rem;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 3.4rem;
  height: 2rem;
  background-color: $white-color;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  border-radius: 0.08rem;
  .detail__item {
    width: 100%;
    height: 0.48rem;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 0.12rem;
    &__icon {
      color: #ed4a47;
      font-size: 0.18rem;
    }
    &__txt {
      font-size: 0.14rem;
      color: #262626;
      margin-left: 0.1rem;
    }
    &__arrow {
      margin-left: 2rem;
      font-size: 0.15rem;
      transform: rotate(180deg);
    }
  }
  .money {
    .detail__item__icon {
      font-size: 0.2rem;
    }
    .detail__item__txt {
      margin-right: 0.12rem;
    }
  }
  .address {
    .detail__item__icon {
      color: #32c5ff;
    }
    .detail__item__txt {
      margin-right: 0.15rem;
    }
  }
  .help {
    .detail__item__icon {
      color: rgba(144, 19, 254, 0.92);
    }
  }
}
</style>
